<template>
	<view>
		<view class='fixed-content'>
			<cu-custom isLeft>
				<view  slot="left" class="navBar" @click='handleEdit'>
					<image v-if='isLeft' @click.stop='handleBack' class='back-img' src="https://qiyeji.oss-cn-beijing.aliyuncs.com/20250111/202501101128200984.png" mode=""></image>
					<image class='left-icon' src='/static/icon/archive.png'></image>
					<view class='title'>{{name}}</view>
					<image class='edit-icon' src='/static/icon/edit2.png'></image>
				</view>
			</cu-custom>
			<view class='tabs'>
				<view class='tab-item' :class='{active: item.value == tabActive}' v-for='item in tabs' :key='item.value'
					@click='changeTab(item)'>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		
		<view  v-if='isNull' style='margin-top: 200rpx;'>
			<data-null></data-null>
		</view>
		<view class='list' v-if='tabActive == "1"'>
			<view class='list-item' v-for='(item,index) in list' :key='item.id'>
				<view class="title">{{item.title}}</view>
				<view class="user ">
					<image class='icon' src='/static/icon/user.png'></image>
					<view class='name text-cut'>档案确认方: {{item.confirmBy}}</view>
				</view>
				<view class='des'>对方确认以上信息，并对不实信息承担相关责任</view>
				<textItem :itemId='index' :content='item.content'></textItem>
			</view>
		</view>
		
		<view class='list2' v-if='tabActive == "2" && list.length'>
			<template v-for='growtItem in growthList'>
				<view class='item-date'>{{growtItem.year}}年</view>
				<view class='sub-list' v-for='item in growtItem.list' :key='item.id'>
					<view class='sub-item'>
						<view class='left-box'>
							<view class='date'>{{item.createTimeStr}}</view>
							<view class='round'></view>
						</view>
						<view class='content'>
							<view class='title'>{{item.content}}</view>
							<view class='pics'>
								<image v-if='item.imageList.length' v-for='(pic,picIndex) in item.imageList' class='pic' :src='pic'
									@click='handlePeviewImage(item.imageList,picIndex)'></image>
								
								<video v-if='item.videos' class='pic' :src="item.videos"></video>
							</view>
							<view class='date'>{{item.createTime}}</view>
						</view>
					</view>
				</view>
			</template>
		</view>
		
		<view v-if='params.cargoId' class='submit' @click='handleAdd'>
			<image class='icon' src="https://qiyeji.oss-cn-beijing.aliyuncs.com/20250111/202412181419447233.png" mode=""></image>
			<text>添加档案</text>
		</view>
		
		<nameEdit ref='nameEdit'></nameEdit>
		<addModal ref='addModal'></addModal>
		<loginModal ref="loginModal" @loginSuccess="loginSuccess"></loginModal>
	</view>
</template>

<script>
	import util from '@/common/util'
	import {pageRecord_base} from '@/api/pet/archive/base'
	import {pageRecord_growth} from '@/api/pet/archive/growth'
	import {getCargoDetail} from '@/api/pet/index/saler'
	import {
		getCargoList,
	} from "@/api/pet/binding/index"
	import nameEdit from './name-edit'
	import addModal from './add-modal'
	import textItem from './text-item'
	export default {
		components: {
			nameEdit,
			addModal,
			textItem
		},
		props: {
			isLeft: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				isNull: false,
				name: '--',
				tabActive: '1',
				tabs: [{
					name: '基础档案',
					value: '1'
				},
				{
					name: '成长档案',
					value: '2'
				}],
				params: {
					page: 1,
					limit: 10,
					cargoId: undefined
				},
				total: 0,
				list: [],
				growthList: []
			}
		},
		methods: {
			loginSuccess(){
				this.init()
			},
			handleBack() {
				uni.navigateBack()
			},
			reachBottom() {
				console.log('加载更多')
				if(this.total > this.params.page * this.params.limit) {
					this.params.page++;
					this.getList()
				}
			},
			async init() {
				
				this.list = [];
				this.params.page = 1;
				if (!util.isLogin.call(this)) {
					this.isNull = true;
					return;
				}
				this.params.cargoId = await this.getCargoList()
				if(!this.params.cargoId) {
					this.isNull = true;
					return;
				}
				
				uni.showLoading({mask: true})
				this.getCargoDetail()
				this.getList()
			},
			getCargoList() {
				return new Promise(resolve => {
					if(uni.getStorageSync('pet_cargoId')) {
						resolve(uni.getStorageSync('pet_cargoId'))
					} else {
						getCargoList({
						}).then(res => {
							if(res.length) {
								uni.setStorageSync('pet_cargoId',res[0].id)
								resolve(res[0].id)
							} else {
								resolve(undefined)
							}
						})
					}
				})
				
			},
			getCargoDetail() {
				getCargoDetail({id: this.params.cargoId}).then(res => {
					this.name = res.recordName;
				})
			},
			getList() {
				this.isNull = false;
				if(this.tabActive == '1') {
					this.getBaseList()
				} else {
					this.getGrowthList()
				}
			},
			getBaseList() {
				if (!util.isLogin.call(this)) {
					return;
				}
				pageRecord_base(this.params).then(res => {
					this.getListSuccess(res)
				})
			},
			getGrowthList() {
				pageRecord_growth(this.params).then(res => {
					this.getListSuccess(res)
					let growthList = [];
					this.list.map(item => {
						let currentDate = util.getdate()
						let itemDate = util.getdate(item.createTime);
						let itemDates = itemDate.split('-')
						item.createTimeStr = currentDate == itemDate? '今天' : itemDates[1] + '月' + itemDates[2] + '日'
						let year = item.createTime.substring(0,4);
						
						item.imageList = item.images? item.images.split('@') : []
						
						if(growthList.some(growth => growth.year == year)) {
							let growthItem = growthList.find(growth => growth.year == year);
							growthItem.list.push(item)
						} else {
							growthList.push({
								year: year,
								list: [item]
							})
						}
					})
					this.growthList = growthList
				})
			},
			getListSuccess(res) {
				this.total = res.total;
				this.list = [...this.list,...res.rows]
				uni.hideLoading()
				uni.stopPullDownRefresh()
				if(!this.list.length) {
					this.isNull = true;
				}
			},
			handlePeviewImage(urls,current) {
				uni.previewImage({
					current,
					urls
				})
			},
			handleEdit() {
				if (!util.isLogin.call(this)) {
					return;
				}
				if(!this.params.cargoId) return uni.showToast({title: '请前往宠物页面绑定宠物',icon: 'none'})
				this.$refs.nameEdit.handleOpen(this.params.cargoId)
			},
			changeTab(e) {
				if(this.tabActive == e.value) return;
				this.tabActive = e.value
				this.init()
			},
			handleAdd() {
				if (!util.isLogin.call(this)) {
					return;
				}
				this.$refs.addModal.handleOpen()
			},
			toPage(url) {
				util.navigateTo({url})
			},
		}
	}
</script>


<style scoped lang="scss">
	.fixed-content {
		position: sticky;
		top: 0;
		z-index: 9;
		background: var(--primaryBg);
		
		.navBar {
			position: relative;
			z-index: 9999;
			width: max-content;
			padding-left: 32rpx;
			display: flex;
			align-items: center;
			
			.back-img {
				width: 48rpx;
				height: 48rpx;
				margin-right: 16rpx;
			}
			
			.left-icon {
				width: 50rpx;
				height: 50rpx;
				margin-right: 8rpx;
			}
			
			.title {
				font-weight: 600;
				font-size: 36rpx;
				color: var(--h1Color);
				margin-right: 10rpx;
			}
			
			.edit-icon {
				width: 30rpx;
				height: 30rpx;
			}
		}
		
		.tabs {
			margin-top: 32rpx;
			width: 100%;
			height: 96rpx;
			background: #FFFFFF;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			display: flex;
			align-items: center;
			
			.tab-item {
				flex: 1;
				font-weight: 500;
				font-size: 28rpx;
				color: #666666;
				text-align: center;
				position: relative;
				
				&.active {
					font-weight: 600;
					color: var(--h1Color);
					
					&:before {
						content: '';
						position: absolute;
						left: 50%;
						bottom: -4rpx;
						transform: translateX(-50%);
						width: 112rpx;
						height: 16rpx;
						background: var(--primaryBg);
						border-radius: 8rpx;
						z-index: 0;
					}
				}
				
				text {
					position: relative;
					z-index: 1;
				}
			}
		}
	}
	
	
	.list {
		padding: 16rpx;
		
		.list-item {
			width: 100%;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 28rpx 24rpx;
			margin-bottom: 16rpx;
			
			.title {
				font-weight: 600;
				font-size: 34rpx;
				color: var(--h1Color);
				line-height: 48rpx;
			}
			
			.user {
				margin-top: 16rpx;
				display: flex;
				align-items: center;
				line-height: 1;
				color: var(--h2Color);
				
				.icon {
					width: 26rpx;
					height: 26rpx;
					margin-right: 12rpx;
				}
				
				.name {
					max-width: 600rpx;
				}
			}
			
			.des {
				margin-top: 6rpx;
				font-size: 22rpx;
				color: var(--h4Color);
			}
			
		}
	}
	
	
	.list2 {
		padding: 16rpx 32rpx 0 32rpx;
		background: #fff;
		
		.item-date {
			margin-top: 32rpx;
			color: var(--h3Color);
			margin-bottom: 40rpx;
		}
		
		.sub-list {
			
			.sub-item {
				display: flex;
				padding-bottom: 88rpx;
				
				.left-box {
					height: max-content;
					display: flex;
					align-items: center;
					font-weight: 500;
					font-size: 26rpx;
					color: var(--h2Color);
					width: 150rpx;
					margin-right: 40rpx;
					
					.round {
						margin-left: auto;
						width: 24rpx;
						height: 24rpx;
						background: var(--h1Color);
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						
						&:before {
							content: '';
							width: 8rpx;
							height: 8rpx;
							border-radius: 50%;
							background: #fff;
						}
					}
				}
				
				.content {
					flex: 1;
					
					.title {
						font-size: 30rpx;
						color: var(--h1Color);
						line-height: 42rpx;
					}
					
					.pics {
						display: flex;
						flex-wrap: wrap;
						margin-top: 28rpx;
						
						.pic {
							width: 200rpx;
							height: 200rpx;
							margin-right: 12rpx;
							border-radius: 14rpx;
						}
					}
					
					.date {
						margin-top: 24rpx;
						font-size: 22rpx;
						color: var(--h2Color);
					}
				}
			}
		}
	}
	
	.submit {
		position: fixed;
		bottom: 160rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 202rpx;
		height: 80rpx;
		background: var(--primaryGradBg);
		box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0,0,0,0.03);
		border-radius: 40rpx;
		border: 4rpx solid #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 600;
		font-size: 28rpx;
		color: var(--btnColor);
		line-height: 1;
		
		.icon {
			width: 30rpx;
			height: 30rpx;
			margin-right: 12rpx;
		}
	}
</style>